<template>
	<view class="content">
		<!-- 商店 -->
		<view class="store yy-padding-lr-10px">
			<!-- 头像、店铺名称、公告 -->
			<view class="store-box yy-display-flex">
				<!-- 头像 -->
				<view class="store-img">
					<image class="yy-image-v1" src="/static/images/商店4.png" mode="aspectFit"></image>
				</view>
				<!-- 店铺信息 -->
				<view class="store-info  ">
					<!-- 店铺标题 -->
					<h3 class="yy-margin-top-5px yy-margin-bottom-15px elip-1 yy-store-title yy-margin-lr-10px">食分烤究食分烤究烤肉饭(一饭一楼)</h3>
					<!-- 店铺公告 -->
					<view class="yy-margin-lr-10px" style="color: #666666;">
						<text class="elip-2 ">公告：食分烤究食分烤究烤肉饭(一饭一楼)食分烤究食分烤究烤肉饭(一饭一楼)食分烤究食分烤究烤肉饭(一饭一楼)食分烤究食分烤究烤肉饭(一饭一楼)</text>
					</view>
				</view>
			</view>
			
			<!-- 商品主体大盒子 -->
			<view class="shoop-box yy-margin-top-15px">
				<!-- 顶部导航 -->
				<view class="title-box yy-flex-align-items-center yy-display-flex">
					<ul class="nav yy-flex-align-items-center  yy-padding-0px yy-display-flex yy-ul-list-style-none">
						<li class="yy-padding-lr-10px active">商品</li>
						<li class="yy-padding-lr-10px ">评价</li>
					</ul>
					<view class="yy-margin-left-auto">
						<ul class="nav yy-flex-align-items-center  yy-padding-0px yy-display-flex yy-ul-list-style-none">
							<li class="yy-text-color1 yy-text-size-20px  yy-padding-lr-10px iconfont icon-get-coupon"></li>
							<li class="yy-padding-lr-10px iconfont icon-xiai"></li>
						</ul>
					</view>
				</view>
			
				<!-- 内容 -->
				<view class="a yy-display-flex">
					<!-- 左边导航 -->
					<scroll-view scroll-y class="ab yy-margin-top-5px">
						<view class="ab-item active yy-padding-10px  yy-text-align-centent">活动专区</view>
						<view v-for="(item,index) in 20" :key="index" class="ab-item yy-padding-10px  yy-text-align-centent">活动专区</view>
					</scroll-view>
					<!-- 右边商品盒子 -->
					<view class="b yy-margin-top-5px">
						<!-- 商品盒子 -->
						<view class="store-box  yy-display-flex">
							<!-- 头像 -->
							<view class="store-img">
								<image class="yy-image-v1" src="/static/images/商店4.png" mode="aspectFit"></image>
							</view>
							<!-- 店铺信息 -->
							<view class="store-info  ">
								<!-- 店铺标题 -->
								<h3 class="yy-margin-top-5px  elip-1 yy-store-title yy-margin-lr-10px">食分烤究食分烤究烤肉饭(一饭一楼)</h3>
								<view class="yy-margin-top-5px yy-display-flex yy-margin-lr-10px">
									<text>月销7份</text>
								</view>
								<view class=" yy-flex-align-items-center yy-margin-top-5px yy-display-flex yy-margin-lr-10px">
									<view>
										<text class="yy-text-size-12px">￥</text>
										<text class="yy-text-color1">10</text>
									</view>
									<view class="yy-margin-left-auto add">
										<uni-icons type="plusempty" size="30"></uni-icons>

									</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
	.store {
		background-color: #ffffff;
		.b {
			width: 70%;
			background-color: orchid;
			.store-box {
				
				.add {
					
				}
			}
		}
		.a {
			height:500px;
			.ab {
				width: 30%;
				height:500px;
				background-color: #f8f9fd;
				.active {
					font-weight: 700;
					background-color: #ffffff;
					border-bottom: 1px solid #e64c37;
				}
			}
		}
		.shoop-box {
			
			.title-box {
				height:50px;
				box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, .3);
				.nav li {
					height:100%;
					line-height: 50px;
					color:#696969;
				}
				.nav .active {
					font-weight: 700;
					color:black;
					border-bottom: 2px solid #e64c37;
				}
			}
		}
		.store-box {
			height:100px;
			.store-info {
				width: 70%;
			}
			.store-img {
				width: 30%;
			}
		}
	}
</style>
